<template>
  <div>
    <!-- 
      v-model
      作用：将vue的数据变量和表单元素的value属性双向绑定在一起
      语法：
        v-model="vue数据变量"
      
      双向绑定
        变量变化 --- 视图自动同步
        视图变化 --- 数据自动同步
     -->
    用户名： <input v-model="username" type="text">
    <br>
    密码：<input v-model="password" type="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      username: "无名氏",
      password: 123456
    }
  },
  methods: {
    login(){
      // 如果获取用户输入的用户名和密码？
      console.log(this.username);
      console.log(this.password);
    }
  }
}
</script>

<style>

</style>